<!-- 组合式 -->
<script setup>
import { ref, reactive, computed, onMounted, watch } from "vue";

import { ElMessage } from "element-plus";

import router from "@/router";
import util from "@/utils/util";

// 参数接收
const props = defineProps({
  msg: {
    type: String,
    default: "msg",
  },
});
const modelType = defineModel("type");

// 参数
const pages = reactive({
  formData: {
    username: "admin",
    password: "admin123",
  },
  checked: false,

  rules: {
    username: [
      {
        required: true,
        message: "请输入账号",
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  },
});
const formRef = ref();

// onMounted(() => {})

// 登录
function changeLogin() {
  // 拦截验证
  formRef.value.validate(async (valid) => {
    if (!valid) return;
    emit("login", pages.formData);
  });
}

// 暴露
defineExpose({});

// 回调
const emit = defineEmits(["change", "login", "register"]);
</script>

<template>
  <div class="HomeView-form">
    <div style="width: 100%">
      <p class="title">登录</p>
      <p class="biao"></p>
    </div>

    <!--  -->
    <el-form
      ref="formRef"
      :model="pages.formData"
      :rules="pages.rules"
      style="width: 100%; margin-top: 30px"
      label-position="top"
    >
      <!-- 账号： -->
      <el-form-item label="账号：" prop="username">
        <el-input
          type="text"
          maxlength="11"
          v-model="pages.formData.username"
          placeholder="请输入账号"
          clearable
          size="large"
          :style="{ width: '100%' }"
        />
      </el-form-item>

      <!-- 密码： -->
      <el-form-item label="密码：" prop="password">
        <el-input
          show-password
          type="text"
          v-model="pages.formData.password"
          placeholder="请输入密码"
          clearable
          size="large"
          :style="{ width: '100%' }"
        />
      </el-form-item>
    </el-form>

    <!-- 登录/注册 -->
    <l-button value="登录" @change="changeLogin" />
    <!-- / 注册 -->
    <el-link style="margin-top: 10px" @click="modelType = 2">注册</el-link>
  </div>
</template>

<style lang="scss">
.HomeView-form {
  .el-form-item__label {
    font-size: 14px;
    color: #999999;
  }
}
</style>
<style lang="scss" scoped>
.HomeView-form {
  margin-left: 126px;
  margin-right: 75px;
  padding: 90px 70px 55px 70px;
  background: #ffffff;
  border-radius: 5px;

  display: flex;
  flex-direction: column;
  align-items: center;

  .title {
    font-weight: bold;
    font-size: 28px;
    color: #333333;
  }

  .biao {
    margin-top: 10px;
    width: 60px;
    height: 4px;
    background: #5775ef;
    border-radius: 6px 6px 6px 6px;
  }

  .l-button {
    margin-top: 10px;
    width: 100%;
  }

  .xieyi {
    margin-top: 10px;
    font-size: 16px;
    color: #333333;

    text {
      color: #5775ef;
      cursor: pointer;
    }
  }
}
</style>
